<template>
  <div class="function">
    <el-row type="flex" class="function-header">
      <div class="img"><el-image :src="icon_url" /></div>
      <div class="desc">
        <div class="title">{{ title }}</div>
        <div class="text">{{ description }}</div>
        <!-- <div class="price">¥999/年</div> -->
        <div class="btns"><el-button size="mini" type="primary">正在开发</el-button></div>
      </div>
    </el-row>
    <div class="function-main">
      <div class="function-content">
        <div class="title">功能介绍</div>
        <div class="info"><el-image :src="image_url" /></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    image: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    }
  },
  computed: {
    icon_url() {
      return require('@/assets/todu/' + this.icon);
    },
    image_url() {
      return require('@/assets/todu/' + this.image);
    }
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  }
};
</script>
<style lang="scss">
.function {
  background-color: #f8f9fa;
  .function-header {
    background-color: #fff;
    padding: 20px 26px 20px 20px;
    .img {
      width: 200px;
      padding-top: 200px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      margin-right: 30px;
      .el-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
    .desc {
      padding-top: 20px;
      .title {
        color: #303133;
        font-size: 28px;
        font-weight: bold;
      }
      .text {
        color: #606266;
        font-size: 14px;
        margin-top: 25px;
      }
      .price {
        color: #303133;
        font-size: 14px;
        margin-top: 16px;
      }
      .btns {
        margin-top: 16px;
        margin-bottom: 25px;
      }
    }
  }
  .function-main {
    margin-top: 20px;
    padding: 0 26px 0 20px;
    background-color: #fff;
    .function-content {
      .title {
        color: #303133;
        font-size: 14px;
        padding: 15px 0;
      }
      .info {
        .el-image {
          width: 100%;
        }
      }
    }
  }
}
</style>
